<template>
  <div>
    <nav-bar name="我的课表" backgroundColor="rgb(124,232,235)"></nav-bar>
    <div class="week">
      <div>周一</div>
      <div>周二</div>
      <div>周三</div>
      <div>周四</div>
      <div>周五</div>
    </div>
    <div id="class"  v-if="isshow">
      <div class="class-time">
        <div v-for="item in 12" :key="item + 100">{{ item }}</div>
      </div>
      <div class="class-name" v-for="(item,index) in table " :key="index">
        
              <div v-for="(aitem,aindex) in item" :key="aindex" class="dayitem">{{aitem}}</div>
        
          
      </div>
    </div>
    <div class="tab-bar">
      <div class="left">星期一</div>
      <div class="center">15周</div>
      <div @click="$router.go(-1)" >
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-houtui"></use>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/navbar";
export default {
   data() {
    return {
      table: new Array(),
      isshow:false
    };
  },
  watch:{
      table(){
         
      }
  },
  methods: {
    async getTable() {
      const res = await this.$http.get("/gettable", {
        params: {
          id: localStorage.getItem("id"),
        },
      });
            console.log(res)
      for (let i = 0; i < res.data.arr.length; i++) {
        this.table[i] = res.data.arr[i].split(",");
      }
         console.log(this.table);
         this.isshow=true
    },
  },
 
  components: {
    navBar,
  },
  created() {
    this.getTable();
     console.log(this.table);
  },

 
};
</script>
<style scoped>
.week {
  height: 40px;
  background-color: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 15px;
  line-height: 40px;
}
.week div {
  width: 100px;
  text-align: center;
}
.week div:nth-child(1) {
  border-left: 1px solid rgba(174, 174, 174, 0.2);
}
#class {
  display: flex;
}
.class-time {
  border-right: 1px solid rgba(174, 174, 174, 0.2);
  width: 15px;
  background-color: white;
  height: 800px;
}
.class-time div {
  text-align: center;
  margin-bottom: 50px;
}

.tab-bar {
  color: white;
  width: 100%;
  position:fixed;
  bottom: 0px;
  height: 70px;
  background-color: rgb(115, 187, 246);
  border-radius: 20px;
  display: flex;
  font-size: 20px;
  align-items: center;
  justify-content: center;
}
.class-name {
  background: white;
  width: 80px;
}
.class-name .dayitem {
  text-align: center;
  width:  80px;
  height: 65px;
  background-color: white;
  line-height: 30px;
  margin-bottom: 2px;
}
.class-name .dayclass {
  background-color: white;
  
}

.tab-bar .left {
  font-size: 15px;
  width: 100px;
  margin-left: 10px;
}
.tab-bar .center {
  flex: 1;
  text-align: center;
}
.tab-bar .icon {
  width: 100px;
  height: 2em;
}
</style>